﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />

    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }

        .mui-content .mui-table-view-cell {
            text-align: center;
            height: 140px;
        }

        .mui-content .mui-table-view-chevron .mui-table-view-cell {
            padding-right: 0px;
            margin-left: -15px;
        }

        .mui-content .mui-table-view-cell {
            background-color: #efeff4;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            position: initial;
        }
    </style>


</head>
<body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">

                    <div class="title">
                        <img src="../../images/logo.png" width="90">
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted mui-hidden" id="login_ul">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="login" href="html/barcode_scan.html">
                                登录
                            </a>
                        </li>
                    </ul>

                    <p class="menu-name">话题</p>
                    <ul class="mui-table-view mui-table-view-inverted" id="ul_topics">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="all">
                                最新
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="good">
                                精华
                            </a>
                        </li>
                    </ul>


                </div>
            </div>
        </aside>
        <!--主界面部分-->
        <div class="mui-inner-wrap" style="background-color:#efeff4">
            <header class="mui-bar mui-bar-nav">
                <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                <h1 class="mui-title">留学服务</h1>
            </header>


            <div class="mui-content" id="mui-content">

                <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="padding-top:44px;padding-bottom:50px;">
                    <div class="mui-scroll">
                        <div id="slider" class="mui-slider">
                            <div class="mui-slider-group mui-slider-loop">
                                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                                <div class="mui-slider-item mui-slider-item-duplicate">
                                    <a href="#">
                                        <img src="../../images/yuantiao.jpg">
                                    </a>
                                </div>
                                <!-- 第一张 -->
                                <div class="mui-slider-item">
                                    <a href="#">
                                        <img src="../../images/shuijiao.jpg">
                                    </a>
                                </div>
                                <!-- 第二张 -->
                                <div class="mui-slider-item">
                                    <a href="#">
                                        <img src="../../images/muwu.jpg">
                                    </a>
                                </div>
                                <!-- 第三张 -->
                                <div class="mui-slider-item">
                                    <a href="#">
                                        <img src="../../images/cbd.jpg">
                                    </a>
                                </div>
                                <!-- 第四张 -->
                                <div class="mui-slider-item">
                                    <a href="#">
                                        <img src="../../images/yuantiao.jpg">
                                    </a>
                                </div>
                                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                                <div class="mui-slider-item mui-slider-item-duplicate">
                                    <a href="#">
                                        <img src="../../images/shuijiao.jpg">
                                    </a>
                                </div>
                            </div>
                            <div class="mui-slider-indicator">
                                <div class="mui-indicator mui-active"></div>
                                <div class="mui-indicator"></div>
                                <div class="mui-indicator"></div>
                                <div class="mui-indicator"></div>
                            </div>
                        </div>
                        <ul class="mui-table-view mui-table-view-chevron">
                            <style>
                                .panel-heading {
                                    height: 30px;
                                }

                                .thumb-md {
                                    width: 64px;
                                    display: inline-block;
                                    border-radius: 50%;
                                }

                                .top-title {
                                    height: 35px;
                                }

                                .panal {
                                    height: 94px;
                                    background-color: white;
                                }

                                .panal-left {
                                    width: 50%;
                                    float: left;
                                    display: inline-block;
                                    margin-top: 23px;
                                }

                                .panal-right {
                                    width: 50%;
                                    float: right;
                                    margin-top: 12px;
                                }

                                .panal-r-in {
                                    float: left;
                                    padding-left: 20px;
                                }

                                .panal-l-in {
                                    float: right;
                                    padding-right: 20px;
                                }
                            </style>
                            <li class="mui-table-view-cell">

                                <div class="top-title">
                                    <span class="text-lt">当地资讯</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>资讯<br><span>'快'才是王道</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">留学一条龙</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>一条龙服务<br><span>'学'才是王道</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">移民/留学</span>
                                </div>

                                <div id="yimin" class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>移民中介<br><span>快速移民</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div id="liuxue" class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>留学中介<br><span>方便留学</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">招聘</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>兼职<br><span>边学边挣</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>
                            <li class="mui-table-view-cell" style="height:230px;">
                                <div class="top-title">
                                    <span class="text-lt">公开课</span>
                                </div>

                                <div class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>语言培训<br><span>talkshow</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>课程补习<br><span>学习一夏</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                                <div class="panal" style="background-color:white;margin-top:95px;">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>讲座<br><span>没事听听</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">房屋交易</span>
                                </div>

                                <div class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>租房<br><span>住好房</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>买房<br><span>买好房</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell" style="height:230px;">
                                <div class="top-title">
                                    <span class="text-lt">交易频道</span>
                                </div>

                                <div class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>家具家电<br><span>9.9新</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>汽车<br><span>安全放心</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                                <div class="panal" style="background-color:white;margin-top:95px;">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>教辅/教材<br><span>哪都不是事</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">旅游出行</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>旅游服务<br><span>来此说走就走的旅行</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">物流快递</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>快递<br><span>快'快'快</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>
                            <li class="mui-table-view-cell" style="height:325px;">
                                <div class="top-title">
                                    <span class="text-lt">生活服务</span>
                                </div>

                                <div class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>清洁<br><span>干干净净</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>印刷/打印<br><span>copy</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                                <div class="panal" style="float:left;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>搬家<br><span>一车走</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                                <div class="panal" style="float:right;width:50%;">
                                    <div class="panal-left" style="width:45%">
                                        <div class="panal-l-in" style="padding:0;">
                                            <p>手机服务<br><span>赞赞赞</span></p>
                                        </div>
                                    </div>
                                    <div style="width:10%"></div>
                                    <div class="panal-right" style="width:45%">
                                        <div class="panal-r-in" style="padding:0;">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>
                                <div class="panal" style="margin-top:187px;">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>翻译<br><span>说人话</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>

                            </li>
                            <li class="mui-table-view-cell">
                                <div class="top-title">
                                    <span class="text-lt">代购货源</span>
                                </div>

                                <div class="panal">
                                    <div class="panal-left">
                                        <div class="panal-l-in">
                                            <p>代购<br><span>啥都有</span></p>
                                        </div>
                                    </div>

                                    <div class="panal-right">
                                        <div class="panal-r-in">
                                            <img src="../../images/oversea/kuaidi.jpg" class="thumb-md">
                                        </div>
                                    </div>
                                </div>


                            </li>

                            <li style="padding-bottom:40px;background-color:#efeff4;padding-top:30px;text-align:center;">
                                <button id="rettop" style="">更多敬请期待,点此返回顶部</button>

                            </li>

                        </ul>
                    </div>
                </div>





            </div>


            <div class="mui-off-canvas-backdrop"></div>
            <div id="nav" class="mui-bar mui-bar-tab ">
                <div id="tb-0" class="mui-tab-item ">
                    <span class="mui-icon mui-icon-email hy-icon"></span>
                    <span class="mui-tab-label">最近使用</span>
                </div>
                <div id="tb-1" class="mui-tab-item " href="#tabbar-with-chat">
                    <span class="mui-icon mui-icon-home hy-icon">
                        <span class="mui-badge">9</span>
                    </span>
                    <span class="mui-tab-label">留学圈</span>
                </div>
                <div id="tb-2" class="mui-tab-item mui-active" href="#tabbar-with-contact">
                    <span class="mui-icon mui-icon-contact hy-icon"></span>
                    <span class="mui-tab-label">留学生活</span>
                </div>
                <div id="tb-3" class="mui-tab-item" href="#tabbar-with-map">
                    <span class="mui-icon mui-icon-gear hy-icon"></span>
                    <span class="mui-tab-label">个人中心</span>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="../../js/mui.min.js"></script>


<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script>

    var tb0 = document.getElementById("tb-0");
    var tb1 = document.getElementById("tb-1");
    var tb2 = document.getElementById("tb-2");
    var tb3 = document.getElementById("tb-3");
    //监听点击事件
    tb0.addEventListener("tap", function () {
        location.href = '../chat/_chat.html';
    });
    tb1.addEventListener("tap", function () {
        location.href = '../link/_link.html';
    });
    tb2.addEventListener("tap", function () {
        location.href = '../oversea/_oversea.html';
    });
    tb3.addEventListener("tap", function () {
        location.href = '../person/_person.html';
    });


</script>

<script>
    mui.init();

    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");

    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    classList.add('mui-scalable');


    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();


    //实现ios平台原生侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
        mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
            plus.webview.currentWebview().setStyle({
                'popGesture': 'none'
            });
        });
    }
    (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
            bounce: false,
            indicators: true, //是否显示滚动条
            deceleration: deceleration
        });
        $.ready(function () {

            //循环初始化所有下拉刷新，上拉加载。
            $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                $(pullRefreshEl).pullToRefresh({
                    down: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
                                self.endPullDownToRefresh();
                            }, 1000);
                        }
                    },
                    up: {
                        callback: function () {
                            var self = this;
                            setTimeout(function () {
                                var ul = self.element.querySelector('.mui-table-view');
                                ul.appendChild(createFragment(ul, index, 5));
                                self.endPullUpToRefresh();
                            }, 1000);
                        }
                    }
                });
            });
            var createFragment = function (ul, index, count, reverse) {
                var length = ul.querySelectorAll('li').length;
                var fragment = document.createDocumentFragment();
                var li;
                for (var i = 0; i < count; i++) {
                    li = document.createElement('li');
                    li.className = 'mui-table-view-cell';
                    li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                    fragment.appendChild(li);
                }
                return fragment;
            };
        });
    })(mui);



    var slider = mui("#slider");

    slider.slider({
        interval: 5000

        //slider.slider({
        //    interval: 0
        //});

    });
    var scrollToTopBox = document.getElementById('rettop');
    //返回按钮tap
    scrollToTopBox.addEventListener('tap', function (e) {
        e.stopPropagation();
        mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 1000);//滚动到顶部
        window.scrollTo(0, 1000);
    });

    //监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
    window.addEventListener("swiperight", function (e) {
        //默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
        if (Math.abs(e.detail.angle) < 4) {
            openMenu();
        }
    });


    $("#mui-content li").get(0).addEventListener('tap', function () {
        location.href = '01_information/list.html';
    });
    $("#mui-content li").get(1).addEventListener('tap', function () {
        location.href = '02_onestop/list.html';
    });

    $("#yimin").get(0).addEventListener('tap', function () {
        location.href = '03_immigrationstudy/immigra_list.html';
    });

    $("#liuxue").get(0).addEventListener('tap', function () {
        location.href = '03_immigrationstudy/study_list.html';
    });

    $("#mui-content li").get(3).addEventListener('tap', function () {
        location.href = '04_recruit/list.html';
    });
    $("#mui-content li").get(4).addEventListener('tap', function () {
        location.href = '05_openclass/list.html';
    });
    $("#mui-content li").get(5).addEventListener('tap', function () {
        location.href = '06_house/list.html';
    });
</script>
</html>